package com.example.nick.bodyapplication.compose

import android.util.Log
import androidx.compose.animation.*
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.example.nick.bodyapplication.R
import androidx.lifecycle.viewmodel.compose.viewModel

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MkDevelopMain(viewModel: MkViewModel, onLeftClick: (() -> Unit)? = null) {
//    val viewModel: MkViewModel = viewModel()
    val openOffset by animateFloatAsState(
        if (viewModel.openModule == null) {
            1f
        } else {
            0f
        }
    )

    val openAlpha by animateFloatAsState(
        if (viewModel.openModule == null) {
            0f
        } else {
            1f
        }
    )
    MkDevelopList(onLeftClick) {
        viewModel.openModule = true
    }

//    MkDevelopListSub(Modifier.percentOffsetX(openOffset).background(color = Color.Green).fillMaxHeight()) {
//        viewModel.openModule = null
//    }
    AnimatedVisibility(
        visible = viewModel.openModule != null,
//        enter = fadeIn(
//            // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
//            initialAlpha = 0.4f
//        ),
//        exit = fadeOut(
//            // Overwrites the default animation with tween
//            animationSpec = tween(durationMillis = 250)
//        )
        enter = slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth}, animationSpec = tween(durationMillis = 500)),
//                + fadeIn(animationSpec = tween(durationMillis = 400)),
        exit = slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth}, animationSpec = tween(durationMillis = 500)),
//                + fadeOut(animationSpec = tween(durationMillis = 400))
    ) {
        MkDevelopListSub(Modifier.background(color = Color.Green).fillMaxHeight()) {
            viewModel.openModule = null
        }
    }
}

@Composable
fun MkDevelopList(onLeftClick: (() -> Unit)? = null, onItemCLick: ((Int) -> Unit)? = null) {
    Column(modifier = Modifier.background(color = Color.White).fillMaxHeight()) {
        MkActionBar(
            title = "开发者模式",
            onLeftClick = onLeftClick,
            rightIconId = R.drawable.icon_setting
        )
        LazyColumn(contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)) {
            for (i in 0..9) {
                val rightSwitch: Boolean? = when(i % 3) {
                    1 -> true
                    2 -> false
                    else -> null
                }
                item {
                    MkSettingItem(leftTxt = "left:$i", rightSwitch = rightSwitch, onItemCLick = onItemCLick)
                }
            }
        }
    }
}

@Composable
fun MkDevelopListSub(modifier: Modifier, onLeftClick: (() -> Unit)? = null) {
    Column(modifier = modifier) {
        MkActionBar(
            title = "中国和美国",
            onLeftClick = onLeftClick,
        )
        LazyColumn(contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)) {

            for (i in 0..9) {
                val rightSwitch: Boolean? = when(i % 3) {
                    1 -> true
                    2 -> false
                    else -> null
                }
                item {
                    MkSettingItem(leftTxt = "left:$i", rightSwitch = rightSwitch, onItemCLick = { flag ->
                        Log.i("Compose", "onItemCLick: $flag")
                    })
                }
            }
        }
    }
}